<template>
  <el-timeline>
    <el-timeline-item
        v-for="(node, index) in processList"
        :key="index"
        :timestamp="node.approvalType"
        :type="node.current ? 'primary' : (node.status === '同意' ? 'success' : (node.status === '驳回' ? 'danger' : 'info'))"
        :icon="node.current ? 'el-icon-loading' : 'el-icon-user'"
    >
      <h4>{{ node.nodeType }} - {{ node.status }}</h4>
      <el-card shadow="hover" v-for="handler in node.handlers" :key="handler.userid" class="mb-2">
        <div :style="{ fontWeight: handler.isCurrent ? 'bold' : 'normal', color: handler.isCurrent ? '#409EFF' : '#606266' }">
          👤 {{ handler.userid }}：{{ handler.status }}
        </div>
      </el-card>
    </el-timeline-item>
  </el-timeline>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { ElTimeline, ElTimelineItem, ElCard } from 'element-plus'
import 'element-plus/es/components/timeline/style/css'
import 'element-plus/es/components/timeline-item/style/css'
import 'element-plus/es/components/card/style/css'
import {fetchApprovalProcess} from "api/approve.js";

const processList = ref([])
let detailJsonFromBackend = {
  "errcode": 0,
  "errmsg": "ok",
  "info": {
    "sp_no": "202507030002",
    "sp_name": "凤凰庄审批通用模板",
    "sp_status": 1,
    "template_id": "C4c5FcJ9eyx8L7dmGXBUHu6R7Efz3UppSrsKziBep",
    "apply_time": 1751508639,
    "applyer": {
      "userid": "TianQiLi",
      "partyid": "5"
    },
    "sp_record": [
      {
        "sp_status": 1,
        "approverattr": 1,
        "details": [
          {
            "approver": {
              "userid": "LongMaoLin"
            },
            "speech": "",
            "sp_status": 1,
            "sptime": 0,
            "media_id": []
          },
          {
            "approver": {
              "userid": "LiCaiQi"
            },
            "speech": "",
            "sp_status": 1,
            "sptime": 0,
            "media_id": []
          },
          {
            "approver": {
              "userid": "ShiQuan"
            },
            "speech": "",
            "sp_status": 1,
            "sptime": 0,
            "media_id": []
          },
          {
            "approver": {
              "userid": "ChenXingChi"
            },
            "speech": "",
            "sp_status": 1,
            "sptime": 0,
            "media_id": []
          },
          {
            "approver": {
              "userid": "ZhengPeng"
            },
            "speech": "",
            "sp_status": 1,
            "sptime": 0,
            "media_id": []
          },
          {
            "approver": {
              "userid": "TianQiLi"
            },
            "speech": "",
            "sp_status": 1,
            "sptime": 0,
            "media_id": []
          }
        ]
      },
      {
        "sp_status": 1,
        "approverattr": 1,
        "details": [
          {
            "approver": {
              "userid": "TianQiLi"
            },
            "speech": "",
            "sp_status": 1,
            "sptime": 0,
            "media_id": []
          }
        ]
      }
    ],
    "notifyer": [],
    "apply_data": {
      "contents": [
        {
          "control": "Text",
          "id": "Text-1749708121814",
          "title": [
            {
              "text": "类型",
              "lang": "zh_CN"
            }
          ],
          "value": {
            "text": "customer_credity_apply",
            "tips": [],
            "members": [],
            "departments": [],
            "files": [],
            "children": [],
            "stat_field": [],
            "sum_field": [],
            "related_approval": [],
            "students": [],
            "classes": [],
            "docs": [],
            "wedrive_files": []
          },
          "require": 0
        },
        {
          "control": "Text",
          "id": "Text-1749727352938",
          "title": [
            {
              "text": "类型名称",
              "lang": "zh_CN"
            }
          ],
          "value": {
            "text": "客户授信申请",
            "tips": [],
            "members": [],
            "departments": [],
            "files": [],
            "children": [],
            "stat_field": [],
            "sum_field": [],
            "related_approval": [],
            "students": [],
            "classes": [],
            "docs": [],
            "wedrive_files": []
          },
          "require": 0
        },
        {
          "control": "Money",
          "id": "Money-1749708130512",
          "title": [
            {
              "text": "金额",
              "lang": "zh_CN"
            }
          ],
          "value": {
            "tips": [],
            "members": [],
            "departments": [],
            "files": [],
            "children": [],
            "stat_field": [],
            "new_money": "20000.00",
            "sum_field": [],
            "related_approval": [],
            "students": [],
            "classes": [],
            "docs": [],
            "wedrive_files": []
          },
          "require": 0
        },
        {
          "control": "Textarea",
          "id": "Textarea-1749708135103",
          "title": [
            {
              "text": "备注",
              "lang": "zh_CN"
            }
          ],
          "value": {
            "text": "客户名称：帘客云 申请授信额度：20000 申请人：test",
            "tips": [],
            "members": [],
            "departments": [],
            "files": [],
            "children": [],
            "stat_field": [],
            "sum_field": [],
            "related_approval": [],
            "students": [],
            "classes": [],
            "docs": [],
            "wedrive_files": []
          },
          "require": 0
        },
        {
          "control": "Text",
          "id": "Text-1749723357253",
          "title": [
            {
              "text": "业务主键",
              "lang": "zh_CN"
            }
          ],
          "value": {
            "text": "1940593974188425217",
            "tips": [],
            "members": [],
            "departments": [],
            "files": [],
            "children": [],
            "stat_field": [],
            "sum_field": [],
            "related_approval": [],
            "students": [],
            "classes": [],
            "docs": [],
            "wedrive_files": []
          },
          "require": 0
        }
      ]
    },
    "comments": [],
    "process_list": {
      "node_list": [
        {
          "node_type": 1,
          "sp_status": 1,
          "apv_rel": 2,
          "sub_node_list": [
            {
              "userid": "LongMaoLin",
              "speech": "",
              "sp_yj": 1,
              "sptime": 0,
              "media_ids": []
            },
            {
              "userid": "LiCaiQi",
              "speech": "",
              "sp_yj": 1,
              "sptime": 0,
              "media_ids": []
            },
            {
              "userid": "ShiQuan",
              "speech": "",
              "sp_yj": 1,
              "sptime": 0,
              "media_ids": []
            },
            {
              "userid": "ChenXingChi",
              "speech": "",
              "sp_yj": 1,
              "sptime": 0,
              "media_ids": []
            },
            {
              "userid": "ZhengPeng",
              "speech": "",
              "sp_yj": 1,
              "sptime": 0,
              "media_ids": []
            },
            {
              "userid": "TianQiLi",
              "speech": "",
              "sp_yj": 1,
              "sptime": 0,
              "media_ids": []
            }
          ]
        },
        {
          "node_type": 1,
          "sp_status": 1,
          "apv_rel": 2,
          "sub_node_list": [
            {
              "userid": "TianQiLi",
              "speech": "",
              "sp_yj": 1,
              "sptime": 0,
              "media_ids": []
            }
          ]
        }
      ]
    },
    "batch_applyer": []
  }
};
// 示例填充（你实际从接口获取）
onMounted(() => {
  fetchApprovalProcess(JSON.stringify(detailJsonFromBackend)).then(res=>{
    console.log(res.data)
    processList.value = res.data
  })
})
</script>

<style scoped>
.mb-2 {
  margin-bottom: 8px;
}
</style>
